<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejiajun
 * @Date: 2021-08-14 10:52:36
 * @LastEditors: hejiajun
 * @LastEditTime: 2021-08-18 09:10:45
-->
<template>
  <div>
    <h1>This is an about page</h1>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
    <div class="bg-blue-arrow"></div>
    <div class="bg-box-title"></div>
    <div class="bg-tips"></div>

    <div class="bg-planned-production-2"></div>
    <div class="test">
      <div class="bg-planned-production-1"></div>

      盒子1
    </div>
    <div class="test2">
      盒子2
    </div>
    <div class="test3">
      盒子3
    </div>
    <div id="main"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {
    console.log(this.$echarts);

    var chartDom = document.getElementById('main');
    var myChart = this.$echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    };

    option && myChart.setOption(option);
  },

  methods: {},
};
</script>
<style lang="less" scoped>
.test {
  width: 100%;
  .rem(height, 65.5);
  .rem(font-size, 20);
  color: #fff;
  background-color: gray;
}
.test2 {
  width: 100px;
  height: 100px;
  background-color: @link-color;
}
.test3 {
  .rem(width, 100);
  .rem(height, 100);
  background-color: @link-color;
}
#main {
  .rem(width, 100);
  .rem(height, 100);
}
</style>
